<template>
  <div class="GenerateFieldsForm">
    <!-- 表单 -->
    <el-form
      :model="fieldFroms"
      label-width="0"
      size="small"
      @submit.native.prevent="
        () => {
          return;
        }
      "
    >
      <el-table
        :data="fieldFroms.tableFileds"
        tooltip-effect="dark"
        style="width: 100%; border: 1px solid #efefef"
        height="100%"
        @cell-click="cellClick"
        size="small"
      >
        <!-- 序号 -->
        <el-table-column type="index" label="#" width="55" align="center">
        </el-table-column>
        <!-- 字段名称 -->
        <el-table-column prop="fieldName" width="150" align="center">
          <column-slot slot="header" name="字段名称"></column-slot>
          <template slot-scope="scope">
            <el-form-item :prop="`tableFileds.${scope.$index}.fieldName`">
              <column-slot
                type="cell"
                name="字段名称"
                :scope="scope"
                :editId.sync="editId"
                field="fieldName"
                disabled
              ></column-slot>
            </el-form-item>
          </template>
        </el-table-column>
        <!-- 字段备注 -->
        <el-table-column
          prop="fieldNotes"
          :show-overflow-tooltip="true"
          align="center"
          width="150"
        >
          <column-slot slot="header" name="字段备注"></column-slot>
          <template slot-scope="scope">
            <el-form-item :prop="`tableFileds.${scope.$index}.fieldNotes`">
              <column-slot
                type="cell"
                name="字段备注"
                :scope="scope"
                :editId.sync="editId"
                field="fieldNotes"
                disabled
              ></column-slot>
            </el-form-item>
          </template>
        </el-table-column>
        <!-- 字段类型 -->
        <el-table-column prop="fieldType" width="100" align="center">
          <column-slot slot="header" name="字段类型"></column-slot>
          <template slot-scope="scope">
            <column-slot
              type="cell"
              name="字段类型"
              :scope="scope"
              :editId.sync="editId"
              field="fieldType"
              cell-type="select"
              disabled
            ></column-slot>
          </template>
        </el-table-column>
        <!-- 字段长度 -->
        <el-table-column prop="fieldLength" width="80" align="center">
          <column-slot slot="header" name="字段长度"></column-slot>
          <template slot-scope="scope">
            <el-form-item :prop="`tableFileds.${scope.$index}.fieldLength`">
              <column-slot
                type="cell"
                name="字段长度"
                :scope="scope"
                :editId.sync="editId"
                field="fieldLength"
                inputType="number"
                disabled
              ></column-slot>
            </el-form-item>
          </template>
        </el-table-column>
        <!-- 表单显示 -->
        <el-table-column prop="form" width="80" align="center">
          <column-slot slot="header" name="表单显示"></column-slot>
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.form"
              :disabled="scope.row.default"
              :true-label="1"
              :false-label="0"
            ></el-checkbox>
          </template>
        </el-table-column>
        <!-- 列表显示 -->
        <el-table-column prop="table" width="80" align="center">
          <column-slot slot="header" name="列表显示"></column-slot>
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.table"
              :disabled="scope.row.default"
              :true-label="1"
              :false-label="0"
            ></el-checkbox>
          </template>
        </el-table-column>
        <!-- 是否排序 -->
        <el-table-column prop="sort" width="80" align="center">
          <column-slot slot="header" name="是否排序"></column-slot>
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.sort"
              :disabled="scope.row.default"
              :true-label="1"
              :false-label="0"
            ></el-checkbox>
          </template>
        </el-table-column>
        <!-- 是否只读 -->
        <el-table-column prop="readonly" width="80" align="center">
          <column-slot slot="header" name="是否只读"></column-slot>
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.readonly"
              :disabled="scope.row.default"
              :true-label="1"
              :false-label="0"
            ></el-checkbox>
          </template>
        </el-table-column>
        <!-- 是否必填 -->
        <el-table-column prop="required" width="80" align="center">
          <column-slot slot="header" name="是否必填"></column-slot>
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.required"
              :disabled="scope.row.default"
              :true-label="1"
              :false-label="0"
            ></el-checkbox>
          </template>
        </el-table-column>
        <!-- 是否查询 -->
        <el-table-column prop="search" width="80" align="center">
          <column-slot slot="header" name="是否查询"></column-slot>
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.search"
              :disabled="scope.row.default"
              :true-label="1"
              :false-label="0"
            ></el-checkbox>
          </template>
        </el-table-column>
        <!-- 查询方式 -->
        <el-table-column prop="searchType" width="180" align="center">
          <column-slot slot="header" name="查询方式" required></column-slot>
          <template slot-scope="scope">
            <column-slot
              type="cell"
              name="查询方式"
              :scope="scope"
              :editId.sync="editId"
              field="searchType"
              cell-type="select1"
              :select-data="searchTypeList"
              :disabled="scope.row.default"
            ></column-slot>
          </template>
        </el-table-column>
        <!-- 控件类型 -->
        <el-table-column prop="controlType" width="180" align="center">
          <column-slot slot="header" name="控件类型" required></column-slot>
          <template slot-scope="scope">
            <column-slot
              type="cell"
              name="控件类型"
              :scope="scope"
              :editId.sync="editId"
              field="controlType"
              cell-type="select1"
              :select-data="controlTypeList"
              :disabled="scope.row.default"
              :label-name="getControlType(scope.row.controlType)"
            ></column-slot>
          </template>
        </el-table-column>
        <!-- 控件默认值 -->
        <el-table-column prop="controlDefault" min-width="180" align="center">
          <column-slot slot="header" name="控件默认值"></column-slot>
          <template slot-scope="scope">
            <el-form-item :prop="`tableFileds.${scope.$index}.controlDefault`">
              <column-slot
                type="cell"
                name="控件默认值"
                :scope="scope"
                :editId.sync="editId"
                field="controlDefault"
                :disabled="scope.row.default"
              ></column-slot>
            </el-form-item>
          </template>
        </el-table-column>
        <!-- 字典类型 -->
        <el-table-column prop="dictType" width="180" align="center">
          <column-slot slot="header" name="字典类型"></column-slot>
          <template slot-scope="scope">
            <column-slot
              type="cell"
              name="字典类型"
              :scope="scope"
              :editId.sync="editId"
              field="dictType"
              cell-type="select1"
              :select-data="dictTypeList"
              :disabled="scope.row.default"
            ></column-slot>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
import columnSlot from "./columnSlot.vue";
export default {
  name: "GenerateFieldsForm",

  components: {
    columnSlot,
  },

  props: {
    form: {
      type: Object,
      default: () => {
        return {
          tableFileds: [],
        };
      },
    },
  },

  data() {
    return {
      // 表单数据表字段选中数组
      selectedFieldsList: [],
      // 当前可编辑字段标识
      editId: null,
      // 查询方式
      searchTypeList: [
        {
          label: "=",
          value: "=",
        },
        {
          label: "!=",
          value: "!=",
        },
        {
          label: ">",
          value: ">",
        },
        {
          label: ">=",
          value: ">=",
        },
        {
          label: "<",
          value: "<",
        },
        {
          label: "<=",
          value: "<=",
        },
        {
          label: "LIKE",
          value: "LIKE",
        },
        {
          label: "BETWEEN",
          value: "BETWEEN",
        },
      ],
      // 控件类型
      controlTypeList: [
        {
          label: "文本框",
          value: "dict1",
        },
        {
          label: "文本域",
          value: "dict2",
        },
        {
          label: "下拉框",
          value: "dict3",
        },
        {
          label: "单选框",
          value: "dict4",
        },
        {
          label: "复选框",
          value: "dict5",
        },
        {
          label: "日期控件",
          value: "dict6",
        },
        {
          label: "图片上传",
          value: "dict7",
        },
        {
          label: "文件上传",
          value: "dict8",
        },
        {
          label: "富文本上传",
          value: "dict9",
        },
      ],
      // 字典类型
      dictTypeList: [],
    };
  },

  computed: {
    fieldFroms: {
      get() {
        return this.form;
      },
      set(value) {
        this.$emit("update:form", value);
      },
    },
  },

  mounted() {},

  methods: {
    getControlType(e) {
      return this.controlTypeList.find((item) => item.value === e).label;
    },
    // 单元格单击事件
    cellClick(row, column) {
      const index = this.fieldFroms.tableFileds.findIndex(
        (item) => item === row
      );
      const editId = (column.property || "null") + index;
      if (this.editId !== editId) {
        this.editId = editId;
      }
    },
    // 是否编辑字段
    tableFormShow(scope, filed) {
      let str = filed + scope.$index;
      if (scope.row.default) {
        return true;
      } else if (str === this.editId) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="scss">
.GenerateFieldsForm {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .el-form {
    margin-top: 10px;
    width: 100%;
    height: 0;
    flex: 1;

    // 表格单元格
    .cell {
      overflow: inherit;

      .el-form-item {
        position: relative;
        margin: 0;
      }

      .ruleError {
        padding: 2px;
        position: absolute;
        top: -45px;
        left: 10px;
        width: calc(100% - 20px);
        height: 40px;
        color: #ffffff;
        font-size: 12px;
        line-height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        background: #f56c6c;
        box-sizing: border-box;
      }

      .el-input__inner[type="number"]::-webkit-inner-spin-button,
      .el-input__inner[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }
  }
}
</style>
